<template>
  <div class="div">
    <!-- 面包屑 -->
    <div class="top-div">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">客户</el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">客户类型</a></el-breadcrumb-item>
      </el-breadcrumb>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addTableData()"
        v-permissions="{ role: ['PurchaserManagement', 'Admin'] }"
      >
        新增
      </el-button>
    </div>
    <!-- table组件 -->
    <div class="table-div">
      <template class="table-div-template">
        <el-table
          :data="tableData"
          style="width: 100%"
          :border="true"
          @cell-mouse-enter="enter"
          @cell-mouse-leave="leave"
        >
          <el-table-column prop="account" label="集团账号"></el-table-column>
          <el-table-column prop="name" label="集团名称"></el-table-column>
          <el-table-column
            prop="systemUsers.username"
            label="集团管理员"
          ></el-table-column>
          <el-table-column label="详细配送地址">
            <template slot-scope="scope">
              {{ scope.row.addr }}
            </template>
          </el-table-column>
          <el-table-column prop="systemUsers.username" label="操作">
            <template slot-scope="scope">
              <!-- <div v-show="scope.row.id === isshow"> -->
              <el-button
                type="text"
                @click="detailInfo(scope.$index, scope.row)"
                v-permissions="{ role: ['customer', 'GroupManagement'] }"
              >
                详情
              </el-button>
              <el-button
                type="text"
                @click="editInfo(scope.$index, scope.row)"
                v-permissions="{ role: ['PurchaserManagement', 'Admin'] }"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                @click="delInfo(scope.$index, scope.row)"
                v-permissions="{ role: ['PurchaserManagement', 'Admin'] }"
              >
                删除
              </el-button>
              <!-- </div> -->
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- 分页 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="count"
        :total="total"
        background
        layout="total, prev, pager, next, sizes , jumper"
      ></el-pagination>
    </div>
    <!-- dialog新增弹出框。 -->
    <el-dialog
      title="新增集团"
      :visible.sync="dialogFormVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        key="AddFirstFrom"
        ref="addformTwo"
        :model="addform"
        label-width="80px"
        :rules="ruless"
      >
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基础信息" name="first">
            <el-form-item
              label="集团名称"
              prop="name"
              :rules="[
                {
                  required: true,
                  message: '集团名称为必填项',
                  trigger: 'change',
                },
                {
                  max: 125,
                  trigger: 'change',
                },
              ]"
            >
              <el-input
                v-model.trim="addform.name"
                autocomplete="off"
                placeholder="请填写集团名称"
                maxlength="125"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item
              label="集团账号"
              prop="account"
              :rules="[
                {
                  required: true,
                  message: '集团账号为必填项',
                  trigger: 'change',
                },
                {
                  max: 15,
                  trigger: 'change',
                },
                {
                  pattern:
                    /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
                  message: '请填写正确格式手机号',
                },
              ]"
            >
              <el-input
                v-model.trim="addform.account"
                autocomplete="off"
                placeholder="请填写集团账号(集团账号为手机号)"
                maxlength="15"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="addr">
              <el-input
                v-model.trim="addform.addr"
                autocomplete="off"
                placeholder="请填写集团地址"
                maxlength="256"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item label="绑定管理员" prop="systemGroupManagement">
              <el-select
                v-model.trim="addform.systemGroupManagement"
                autocomplete="off"
                placeholder="选择管理员"
                style="width: 380px"
              >
                <el-option
                  v-for="item in selectAdmin"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="绑定财务" prop="systemPurchaserFinance">
              <el-select
                v-model.trim="addform.systemPurchaserFinance"
                autocomplete="off"
                placeholder="请绑定财务"
                style="width: 380px"
              >
                <el-option
                  v-for="item in selectFinance"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <p
              style="
                text-align: center;
                color: rgb(153, 153, 153);
                font-size: 13px;
              "
            >
              说明：绑定管理员作为集团PC端登录账号
            </p>
          </el-tab-pane>
          <el-tab-pane label="开票信息" name="second">
            <el-form
              key="AddSecondFrom"
              ref="addform"
              :model="addform"
              label-width="80px"
              label-position="left"
            >
              <el-form-item
                label="名称"
                prop="taxReceipt"
                :rules="[
                  {
                    required: true,
                    message: '集团账号为必填项',
                    trigger: 'change',
                  },
                ]"
              >
                <el-input
                  v-model.trim="addform.taxReceipt"
                  autocomplete="off"
                  ref="el-input01"
                  placeholder="请填写集团名称"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="税号"
                prop="taxNumber"
                :rules="[
                  {
                    pattern:
                      /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/,
                    message: '请填写正确格式的税号',
                  },
                ]"
              >
                <el-input
                  v-model.trim="addform.taxNumber"
                  autocomplete="off"
                  ref="el-input01"
                  maxlength="18"
                  placeholder="企业报销或开专票必填，个人客户可不填"
                ></el-input>
              </el-form-item>
              <el-form-item label="单位地址" prop="taxAddress">
                <el-input
                  v-model.trim="addform.taxAddress"
                  autocomplete="off"
                  placeholder="公司地址(企业报销或开专票必填)"
                ></el-input>
              </el-form-item>
              <el-form-item
                prop="taxPhoneNumber"
                label="电话号码"
                :rules="[
                  {
                    pattern:
                      /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
                    message: '请填写正确格式手机号',
                  },
                ]"
              >
                <el-input
                  v-model.trim="addform.taxPhoneNumber"
                  autocomplete="off"
                  placeholder="公司电话(企业报销或开专票必填)"
                ></el-input>
              </el-form-item>
              <el-form-item label="开户银行" prop="bank">
                <el-input
                  v-model.trim="addform.bank"
                  autocomplete="off"
                  placeholder="开户银行(企业报销或开专票必填)"
                ></el-input>
              </el-form-item>
              <el-form-item label="银行账户" prop="bankAccount">
                <el-input
                  v-model.trim="addform.bankAccount"
                  autocomplete="off"
                  placeholder="企业开户行账户(企业报销或开专票必填)"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="邮箱地址"
                prop="email"
                :rules="[
                  {
                    required: false,
                    message: '请输入邮箱地址',
                    trigger: 'blur',
                  },
                  {
                    type: 'email',
                    message: '请输入正确的邮箱地址',
                    trigger: ['blur', 'change'],
                  },
                ]"
              >
                <el-input
                  v-model.trim="addform.email"
                  autocomplete="off"
                  placeholder="接收电子发票的邮箱"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- dialog编辑弹出框。 -->
    <el-dialog
      title="编辑集团"
      :visible.sync="EditDialogFormVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="first">
          <el-form
            ref="editForm01"
            :model="editform"
            :rules="rules"
            label-width="80px"
            label-position="left"
          >
            <el-form-item label="集团名称" prop="name">
              <el-input
                v-model.trim="editform.name"
                autocomplete="off"
                ref="el-input01"
                placeholder="请填写集团名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="集团账号" prop="account">
              <el-input
                v-model.trim="editform.account"
                autocomplete="off"
                ref="el-input01"
                placeholder="请填写集团账号(集团账号为手机号)"
              ></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input
                v-model.trim="editform.addr"
                autocomplete="off"
                placeholder="请填写集团地址"
              ></el-input>
            </el-form-item>
            <el-form-item label="绑定管理员" prop="systemGroupManagement">
              <el-select
                v-model.trim="editform.systemGroupManagement"
                autocomplete="off"
                placeholder="选择管理员"
                style="width: 380px"
              >
                <el-option
                  v-for="item in selectAdmin"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="绑定财务" prop="systemPurchaserFinance">
              <el-select
                v-model.trim="editform.systemPurchaserFinance"
                autocomplete="off"
                placeholder="请绑定财务"
                style="width: 380px"
              >
                <el-option
                  v-for="item in selectFinance"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <p
              style="
                text-align: center;
                color: rgb(153, 153, 153);
                font-size: 13px;
              "
            >
              说明：绑定管理员作为集团PC端登录账号
            </p>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="开票信息" name="second">
          <el-form
            ref="editForm02"
            :model="editform"
            :rules="rules"
            label-width="80px"
            label-position="left"
          >
            <el-form-item label="名称" prop="taxReceipt">
              <el-input
                v-model.trim="editform.taxReceipt"
                autocomplete="off"
                ref="el-input01"
                placeholder="请填写集团名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="税号"
              prop="taxNumber"
              :rules="[
                {
                  pattern: /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/,
                  message: '请填写正确格式的税号',
                },
              ]"
            >
              <el-input
                v-model.number="editform.taxNumber"
                autocomplete="off"
                ref="el-input01"
                maxlength="18"
                placeholder="企业报销或开专票必填，个人客户可不填"
              ></el-input>
            </el-form-item>
            <el-form-item label="单位地址">
              <el-input
                v-model.trim="editform.taxAddress"
                autocomplete="off"
                placeholder="公司地址(企业报销或开专票必填)"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="taxPhoneNumber"
              label="电话号码"
              :rules="[
                {
                  pattern:
                    /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
                  message: '请填写正确格式手机号',
                },
              ]"
            >
              <el-input
                v-model.trim="editform.taxPhoneNumber"
                autocomplete="off"
                placeholder="公司电话(企业报销或开专票必填)"
              ></el-input>
            </el-form-item>
            <el-form-item label="开户银行">
              <el-input
                v-model.trim="editform.bank"
                autocomplete="off"
                placeholder="开户银行(企业报销或开专票必填)"
              ></el-input>
            </el-form-item>
            <el-form-item label="银行账户">
              <el-input
                v-model.trim="editform.bankAccount"
                autocomplete="off"
                placeholder="企业开户行账户(企业报销或开专票必填)"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="邮箱地址"
              prop="email"
              :rules="[
                {
                  required: false,
                  message: '请输入邮箱地址',
                  trigger: 'blur',
                },
                {
                  type: 'email',
                  message: '请输入正确的邮箱地址',
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <el-input
                v-model.trim="editform.email"
                autocomplete="off"
                placeholder="接收电子发票的邮箱"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="EditClose">取 消</el-button>
        <el-button type="primary" @click="EditSave()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 详情编辑框 -->
    <el-dialog
      title="集团详情"
      :visible.sync="detailDialogFormVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="first">
          <el-form
            disabled="true"
            ref="ruleForm"
            :model="editform"
            :rules="rules"
            label-width="80px"
            label-position="left"
          >
            <el-form-item label="集团名称" prop="name">
              <el-input
                v-model.trim="editform.name"
                autocomplete="off"
                ref="el-input01"
                placeholder="请填写集团名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="集团账号" prop="account">
              <el-input
                v-model.trim="editform.account"
                autocomplete="off"
                ref="el-input01"
                placeholder="请填写集团账号(集团账号为手机号)"
              ></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input
                v-model.trim="editform.addr"
                autocomplete="off"
                placeholder="请填写集团地址"
              ></el-input>
            </el-form-item>
            <el-form-item label="绑定管理员">
              <el-select
                v-model.trim="editform.systemCustomerUserId"
                autocomplete="off"
                placeholder="选择管理员"
                style="width: 380px"
              >
                <el-option
                  v-for="item in selectAdmin"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="绑定财务" prop="systemPurchaserFinance">
              <el-select
                v-model.trim="editform.systemPurchaserFinance"
                autocomplete="off"
                placeholder="请绑定财务"
                style="width: 380px"
              >
                <el-option
                  v-for="item in selectFinance"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <p
              style="
                text-align: center;
                color: rgb(153, 153, 153);
                font-size: 13px;
              "
            >
              说明：绑定管理员作为集团PC端登录账号
            </p>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="开票信息" name="second">
          <el-form
            disabled="true"
            ref="form"
            :model="editform"
            :rules="rules"
            label-width="80px"
            label-position="left"
          >
            <el-form-item label="名称" prop="taxReceipt">
              <el-input
                v-model.trim="editform.taxReceipt"
                autocomplete="off"
                ref="el-input01"
                placeholder="请填写集团名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="税号"
              prop="taxNumber"
              :rules="[
                {
                  pattern: /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/,
                  message: '请填写正确格式的税号',
                },
              ]"
            >
              <el-input
                v-model.number="editform.taxNumber"
                autocomplete="off"
                ref="el-input01"
                maxlength="18"
                placeholder="企业报销或开专票必填，个人客户可不填"
              ></el-input>
            </el-form-item>
            <el-form-item label="单位地址">
              <el-input
                v-model.trim="editform.taxAddress"
                autocomplete="off"
                placeholder="公司地址(企业报销或开专票必填)"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="taxPhoneNumber"
              label="电话号码"
              :rules="[
                {
                  pattern:
                    /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
                  message: '请填写正确格式手机号',
                },
              ]"
            >
              <el-input
                v-model.trim="editform.taxPhoneNumber"
                autocomplete="off"
                placeholder="公司电话(企业报销或开专票必填)"
              ></el-input>
            </el-form-item>
            <el-form-item label="开户银行">
              <el-input
                v-model.trim="editform.bank"
                autocomplete="off"
                placeholder="开户银行(企业报销或开专票必填)"
              ></el-input>
            </el-form-item>
            <el-form-item label="银行账户">
              <el-input
                v-model.trim="editform.bankAccount"
                autocomplete="off"
                placeholder="企业开户行账户(企业报销或开专票必填)"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="email"
              label="邮箱地址"
              :rules="[
                {
                  required: false,
                  message: '请输入邮箱地址',
                  trigger: 'blur',
                },
                {
                  type: 'email',
                  message: '请输入正确的邮箱地址',
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <el-input
                v-model.trim="editform.email"
                autocomplete="off"
                placeholder="接收电子发票的邮箱"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailClose">确 定</el-button>
        <!-- <el-button type="primary" @click="EditSave('ruleForm')">
          确 定
        </el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  groupAdd,
  customerDel,
  customerEdit,
  select,
  selectFinanceConservator,
  selectAdminConservator,
  selectFinanceConservatorById,
  selectAdminConservatorById,
} from '@/api/customer/groupManagement'

export default {
  data() {
    return {
      dialogFormVisible: false,
      EditDialogFormVisible: false,
      detailDialogFormVisible: false,
      isshow: -1,
      isCollapse: true,
      currentPage: 1, //当前页数。
      count: 10, //每页显示的条数。
      total: 0, //总数据条数。
      tableData: [],
      activeName: 'first', //标签页索引。
      selectAdmin: [],
      selectAdminsss: [], //编辑dialog
      selectFinance: [], //新增dialog
      selectFinancesss: [],
      editformsss: [],
      addform: {
        wsId: 1,
        name: '',
        account: '',
        adminAccount: '',
        addr: '',
        taxReceipt: '', //这里不知道为什么是必传的。
        taxNumber: null,
        systemGroupManagement: '',
        systemPurchaserFinance: '',
      },
      //编辑
      editform: {
        // wsId: 1,
        // id: null,
        // name: '',
        // account: '',
        // adminAccount: '',
        // addr: '',
        // remarks: '',
        // taxReceipt: '',
        taxNumber: null,
        // taxAddress: '',
        // taxPhoneNumber: null,
        // bank: '',
        // bankAccount: null,
        // email: '',
      },
      //规则一:
      ruless: {
        name: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入正确的名称,128个字以内',
          },
        ],
        account: [
          { required: true, trigger: 'blur', message: '请输入集团账号' },
        ],
      },
      //规则二:
      rules: {
        groupName: [
          { required: true, trigger: 'blur', message: '请输入集团名称' },
        ],
        account: [
          { required: true, trigger: 'blur', message: '请输入集团账号' },
        ],
        name: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入正确的名称,128个字以内',
          },
        ],
        taxReceipt: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入正确的名称,128个字以内',
          },
        ],
      },
    }
  },
  //钩子函数。
  created() {
    this.fetchData()
    // this.selectAll()
    // this.selectOneOf()
  },
  methods: {
    //绑定管理员。
    async selectAll() {
      const res = await selectAdminConservator()
      this.selectAdmin = res.data
      this.selectAdminsss = res.data
    },
    //绑定财务。
    async selectOneOf() {
      const res = await selectFinanceConservator()
      this.selectFinance = res.data
      this.selectFinancesss = res.data
    },

    //获取全部数据。
    fetchData() {
      getList(this.currentPage, this.count)
        .then((res) => {
          this.tableData = res.data.list
          this.total = res.data.total
        })
        .catch(() => {
          alert('数据获取失败')
        })
    },
    //新增-确认按钮。。
    async save() {
      this.$refs.addformTwo.validate(async (valid) => {
        if (valid) {
          this.$refs.addform.validate(async (validsss) => {
            if (validsss) {
              const res = await groupAdd(this.addform)
              if (res.status == 200) {
                this.$message({
                  type: 'success',
                  message: '新增成功',
                })
                this.$refs.addformTwo.resetFields() //清除input内容。
                this.$refs.addform.resetFields() //清除input内容。
                this.dialogFormVisible = false
                this.fetchData()
              } else {
                this.$message({
                  type: 'error',
                  message: res.message,
                })
              }
            }
          })
        }
      })
    },
    //新增。
    async addTableData() {
      const res = await selectAdminConservator()
      this.selectAdmin = res.data
      const resss = await selectFinanceConservator()
      this.selectFinance = resss.data
      this.dialogFormVisible = true
    },
    //取消。
    close() {
      this.dialogFormVisible = false
      this.$refs.addformTwo.resetFields()
      this.$refs.addform.resetFields() //清除input内容。
    },
    //分页单击事件。
    handleSizeChange(val) {
      this.count = val
      this.fetchData()
    },
    //分页单击事件。
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    //删除。
    async delInfo(index, data) {
      this.$confirm('确定删除该集团?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        //确定
        .then(() => {
          this.del(data.id)
        })
        //取消
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    async del(e) {
      let res = await customerDel(e)
      if (res.status == 200) {
        this.$message.success('删除成功!')
        this.fetchData()
      } else {
        this.$message(res.message)
      }
    },
    //详情。
    detailInfo(index, data) {
      this.detailDialogFormVisible = true
      this.editform = JSON.parse(JSON.stringify(data)) //json深拷贝。
    },
    //编辑。
    async editInfo(index, data) {
      this.editform = JSON.parse(JSON.stringify(data)) //json深拷贝。
      const res = await selectAdminConservatorById(data.id)
      this.selectAdmin = res.data
      const resss = await selectFinanceConservatorById(data.id)
      this.selectFinance = resss.data
      this.EditDialogFormVisible = true
    },
    async EditSave() {
      this.$refs.editForm01.validate(async (valid) => {
        if (valid) {
          this.$refs.editForm02.validate(async (validsss) => {
            if (validsss) {
              const res01 = await customerEdit(this.editform)
              if (res01.status == 200) {
                this.$message({
                  type: 'success',
                  message: '编辑成功',
                })
                this.$refs.editForm01.resetFields()
                this.$refs.editForm02.resetFields()
                this.EditDialogFormVisible = false
                this.fetchData()
              } else {
                this.$message.error(res01.message)
              }
            }
          })
        }
      })
    },
    //编辑-取消。
    EditClose() {
      this.EditDialogFormVisible = false
      this.$refs.editForm01.resetFields()
      this.$refs.editForm02.resetFields() //清除input内容。
    },
    detailClose() {
      this.detailDialogFormVisible = false
    },
    //tabs标签页事件。
    handleClick(tab, event) {},
    enter(row, column, cell) {
      this.isshow = row.id
    },
    leave(row, column, cell) {
      this.isshow = -1
    },
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0%;
  padding: 0%;
}
.div {
  .top-div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 45.6px;
    background-color: white;
    display: flex;
    align-items: center;
    flex-wrap: nowrap; //不换行。
    justify-content: space-between;
  }
  .table-div {
    padding: 10px 20px;
    margin-top: 40px;
    background-color: white;
  }

  .el-breadcrumb {
    margin-left: 23px;
  }
  button.el-button.el-button--primary.el-button--small {
    margin-right: 50px;
    width: 75px;
    height: 30px;
    border: none;
  }
  .el-table--border .el-table__cell:first-child .cell {
    padding-left: 10px;
    text-align: center;
  }
  .el-table .cell {
    text-align: center;
    height: 33px;
    line-height: 33px;
  }
  //表头内框为无。
  ::v-deep th.el-table_1_column_1.is-leaf.el-table__cell {
    border-right: none;
  }
  ::v-deep th.el-table_1_column_2.is-leaf.el-table__cell {
    border-right: none;
  }
  ::v-deep th.el-table_1_column_3.is-leaf.el-table__cell {
    border-right: none;
  }
  ::v-deep th.el-table_1_column_4.is-leaf.el-table__cell {
    border-right: none;
  }
  //表格内框为无。
  ::v-deep td.el-table_1_column_1.el-table__cell {
    border-right: none;
  }
  ::v-deep td.el-table_1_column_2.el-table__cell {
    border-right: none;
  }
  ::v-deep td.el-table_1_column_3.el-table__cell {
    border-right: none;
  }
  ::v-deep td.el-table_1_column_4.el-table__cell {
    border-right: none;
  }
  //hover盒子样式。
  // .el-butotn-div {
  //   display: inline-block;
  //   position: absolute;
  //   right: 0%;
  //   top: 0%;
  // }
  // button.el-button.el-button--default.el-button--small {
  //   border: 0;
  //   height: 39.4px;
  //   margin: 0;
  //   width: 70px;
  //   font-size: 14px;
  //   background-color: rgb(24, 144, 255);
  //   color: white;
  //   border-radius: 0;
  // }
}
</style>